<script setup lang="ts">
import { computed, ref } from 'vue';

const disabled = ref(true);
const buttonStatus = computed(() => {
    return disabled;
});
</script>
<template>
    <div class="my-2 d-flex">
        <div class="f-demo-label">禁用按钮:</div>
        <f-switch v-model="disabled"></f-switch>
    </div>
    <div>
        <f-button style="margin: 5px" :disabled="buttonStatus"> 主要按钮 </f-button>
        <f-button style="margin: 5px" :type="'danger'" :disabled="buttonStatus"> 危险按钮 </f-button>
        <f-button style="margin: 5px" :type="'success'" :disabled="buttonStatus"> 成功按钮 </f-button>
        <f-button style="margin: 5px" :type="'warning'" :disabled="buttonStatus"> 警告按钮 </f-button>
        <f-button style="margin: 5px" :type="'secondary'" :disabled="buttonStatus"> 信息按钮 </f-button>
        <f-button style="margin: 5px" :type="'link'" :disabled="buttonStatus"> 文本按钮 </f-button>
    </div>
</template>
<style scoped>
.f-demo-label {
    line-height: 1.4rem;
    margin-right: 8px;
}
</style>
